<template>
  <div id="app">
    <!-- https://juejin.cn/post/6906028995133833230 -->

    <!-- <Dic/> -->
    <!-- 自定义指令验证手机号 -->
    <!-- <Phone/> -->
    <!-- 自定义指令封装防抖 -->
    <!-- <Shake/> -->

    <!-- 插槽 -->
    <!-- 1. 匿名插槽 -->
    <!-- <Slott>
      <h1>我是插槽的内容</h1>
    </Slott> -->
    <!-- 2. 具名插槽 -->
    <!-- 3. 作用域插槽   (可以获取到子组件的数据) -->

    <!-- <Slott>
      <template slot-scope="slot">
        <div v-for="(item, index) in slot.arr" :key="index">
          <h1>
            {{ item }}
          </h1>
        </div>
      </template>
    </Slott> -->

    <!-- 下午 -->
    <!-- S  P  A -->
    <!-- <span>home</span> ----  
    <span>about</span> -->
    <!-- 跳转页面 -->
    <!-- 1. 声明式 -->
    <!-- to 要跳转的页面(匹配路由表中定义的path字段) -->
    <!-- tag  设置标签 -->
    <!-- active-class  给当前选中的添加类名 -->
    <!-- <router-link active-class="active" tag="span" to="/home">home</router-link> ---- 
    <router-link active-class="active" tag="span" to="/about">about</router-link> -->

    <!-- 2. 编程式 -->
    <span v-for="(item, index) in list" @click="pushUrl(item.path)" :key="index">
      {{ item.title }} ---
    </span>

    <router-view></router-view>
  </div>
</template>

<script>
import Dic from "./components/DIc.vue";
import Phone from "./components/Phone.vue";
import Shake from "./components/Shake.vue";
import Slot from "./components/Slot.vue";
export default {
  name: "App",
  data() {
    return {
      list: [
        {
          path: "/home",
          title: "Home",
        },
        {
          path: "/about",
          title: "About",
        },
      ],
    };
  },
  methods: {
    // ["/", "www.bai.du", "4399", "7k7k"]
    pushUrl(url) {
      // this.$router  路由实例
      // push 跳转到指定页面
      this.$router.push(url)
    }
  },
  components: {
    Dic,
    Phone,
    Shake,
    Slott: Slot,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.active {
  color: red;
}
</style>
